<template>
    <div class="store">
        <mySearch @searchData='searchData' :placeholder='placeholder' />
        <div v-if="list&&list.length" class="list">
            <div v-for="(item,index) in list" :key="index" class="item">
                <div class="content">
                    <img :src="url+item.Icon" alt="">
                    <div class="msg">
                        <div class="name">{{item.Name}}</div>
                        <div class="info limit3">{{item.Intro}}</div>
                        <div class="type"></div>
                    </div>
                </div>
                <el-button @click="goInstall(item.Name)" class="btnsize"  type="primary" size="medium">{{ $t('Store_Install') }}</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import http from '@/utils/http'
import fast, {url} from '@/utils/store'
import Vue from 'vue';
import {
    Button
} from  "element-ui";
Vue.use(Button)
export default {
    name: 'Store',
    data(){
        return {
            placeholder:'搜索',
            list: [],
            url:url
        }
    },
    mounted(){
        this.getData();
    },
    methods:{
        getData(data){
            http.post(fast.appstore,data).then(res=>{
                this.list = res.Data;
            })
        },
        searchData(value){
            this.getData({
                name: value,
                search_type: 'like'
            })
        },
        goInstall(name){
            this.$router.push('/install?image='+name)
        }
    }
}
</script>
<style lang="scss" scoped>
    .list{
        margin-top: 20px;
        background: rgb(238, 238, 238);
        .item{
            display: inline-block;
            width: 24%;
            margin: 10px .5%;
            background: white;
            padding: 10px;
            box-sizing: border-box;
            border-radius: 5px;
            .content{
                width: 100%;
                display: flex;
                img{
                    width: 90px;
                    height: 90px;
                    flex-shrink: 0;
                }
                .msg{
                    margin-left: 20px;
                    width: 100%;
                    flex-grow: 1;
                    overflow: hidden;
                    .name{
                        font-size: 16px;
                        font-weight: 600;
                        color: black;
                    }
                    .info{
                        color: gray;
                        font-size: 12px;
                        margin-top: 10px;
                    }
                }
                
            }
            
        }
    }
    .btnsize{
        margin-top: 40px;
        width: 100%;
    }
    
</style>